Pane layouts 分割槽佈局

如何選擇面板佈局(Choosing a pane layout)

佈局包含 1-3 個窗格,具體選擇取決於視窗大小和產品型別。

推薦的分割槽數量

分割槽大小(Window size)推薦的分割槽總數(Recommended pane total)其他可能的分割槽總數(Other pane totals)
緊湊型(Compact)1--
中等(Medium)12
擴充套件型(Expanded)21
大型(Large)21
超大型(Extra-large)21, 3

Types of panes 分割槽分為兩種型別

  1. 固定窗格(Fixed):固定寬度,不隨視窗變化調整大小。
  1. 可變窗格(Flexible):根據可用空間變化,可以伸縮調整。

Single-pane layouts 單分割槽佈局

可以適應任何視窗大小。推薦用於緊湊型(Compact)和中等(Medium)視窗。

Split-pane layout 分屏佈局

使用兩個可變分割槽,適用於摺疊屏和動態佈局。

Fixed and flexible layout 固定與可變佈局

適用於擴充套件型至超大型視窗的佈局,由可根據需求調整排列順序。

固定佈局(Fixed pane)用於資訊密度較低的側邊欄或列表。

靈活佈局(Flexible pane)隨視窗大小調整,用於主要內容。

靈活佈局,固定佈局

Three-pane layouts 三面板佈局

Pane expansion & resizing 面板調整

拖動可調節面板佈局大小,當使用者鬆開拖動手柄時,面板佈局可以吸附到自定義寬度

Persistent pane resizing 持久化調整

佈局調整後,即使關閉應用或調整視窗大小,仍保持設定寬度。

Temporary pane resizing 臨時調整

窗格調整後,關閉應用或頁面重新整理後恢復預設大小。

支援臨時調整次要內容,但不會儲存尺寸變化。

How panes adapt 面板佈局自適應

Show and hide  顯示和隱藏

Levitate  懸浮

Reflow 重排

Spatial panels  空間面板

在 XR 裝置上,面板佈局可以呈現在分離的空間面板中。這些面板必須有清晰的邊界,以便在任何背景下都能清晰可見。